<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本编辑</title>
    <script src='../lib/ol6.15.1/ol.js'></script>
    <link rel='stylesheet' href='../css/ol6.15.1/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
            background: rgba(255, 0, 255, 0.2);
        }
    </style>
</head>
<body>
<div id='map'></div>
<script>
    // 创建地图
    const map = new ol.Map({
        target: 'map',
        layers: [
            // 添加地图图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([0, 0]),
            zoom: 2
        }),
        interactions: new ol.interaction.defaults({
            doubleClickZoom: false
        })
    });

    // 创建一个矢量图层
    const vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    map.addLayer(vectorLayer);

    // 创建文本样式
    const textStyle = new ol.style.Style({
        text: new ol.style.Text({
            text: 'Hello',
            font: '100px Arial',
            fill: new ol.style.Fill({
                color: '#000000'
            }),
            stroke: new ol.style.Stroke({
                color: '#FFF',
                width: 2
            })
        })
    });
    // 创建文本要素
    const textFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([0, 0]))
    });
    textFeature.setStyle(textStyle);


    vectorLayer.getSource().addFeature(textFeature);

    console.log(textFeature, textFeature.getStyle());

    map.on('singleclick', event => {
        const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => feature);
        if (!feature) return;
        console.log(feature);
        let input = document.createElement('input');
        input.type = 'text';
        input.value = textStyle.getText().getText();
        let coordinate = feature.getGeometry().getCoordinates();
        let pixel = map.getPixelFromCoordinate(coordinate);
        let offset = [-input.offsetWidth / 2, -input.offsetHeight / 2];
        let position = [pixel[0] + offset[0], pixel[1] + offset[1]];
        input.style.position = 'absolute';
        input.style.left = position[0] + 'px';
        input.style.top = position[1] + 'px';
        document.body.appendChild(input);

        let finishEditing = function () {
            let newText = input.value;
            textStyle.getText().setText(newText);
            document.body.removeChild(input);
        };
        input.addEventListener('blur', finishEditing);
        input.addEventListener('keydown', function (event) {
            if (event.keyCode === 13) {
                finishEditing();
            }
            input.focus();
        });
    });

    /*    const modify = new ol.interaction.Modify({
            features: new ol.Collection([textFeature])
        });*/

    /*textFeature.on('change', event => {
        console.log(event);
    });

    textFeature.on('propertychange', event => {
        console.log(event);
    });*/

    /*const select = new ol.interaction.Select({
        // condition: ol.events.condition.doubleClick,
        layers: [vectorLayer]
    });*/

    // map.addInteraction(modify);
    // map.addInteraction(select);

    /*select.on('select', event => {
        console.log(textFeature);
        console.log(textFeature.getStyle());
        let selectedFeatures = event.target.getFeatures();
        // console.log(selectedFeatures);
        selectedFeatures.forEach(feature => {
            console.log(feature === textFeature);
            console.log(textStyle,textFeature.getStyle());
            console.log(textStyle.getText().getText());
            let input = document.createElement('input');
            input.type = 'text';
            input.value = textStyle.getText().getText();
            let coordinate = feature.getGeometry().getCoordinates();
            let pixel = map.getPixelFromCoordinate(coordinate);
            let offset = [-input.offsetWidth / 2, -input.offsetHeight / 2];
            let position = [pixel[0] + offset[0], pixel[1] + offset[1]];
            input.style.position = 'absolute';
            input.style.left = position[0] + 'px';
            input.style.top = position[1] + 'px';
            document.body.appendChild(input);

            let finishEditing = function () {
                let newText = input.value;
                textStyle.getText().setText(newText);
                document.body.removeChild(input);
                selectedFeatures.clear();
            };
            input.addEventListener('blur', finishEditing);
            input.addEventListener('keydown', function (event) {
                if (event.keyCode === 13) {
                    finishEditing();
                }
                input.focus();
            });
        });
    });*/
</script>
</body>
</html>